<template>
	<view class="content">
		<tabbar class="tabbar" :dataArray="dataArray" :checkedIndex="checkedIndex"
			@handleIndexChange="handleIndexChange"></tabbar>
		<scroll-view scroll-y="true" class="info" v-if="checkedIndex==0" style="background: #fff;">
			<image class="head" src="../../static/total_img_banner@2x.png" mode="aspectFill"></image>
			<view class="title" style="margin: 40rpx 0 20rpx 0;">盐城市博物馆观众满意度问卷</view>
			<view class="square"
				style="border: 0;padding: 0;width: calc(100% - 80rpx);justify-content: center;">
				2021年8月
			</view>
			<view class="square"
				style="border: 0;padding: 0;width: calc(100% - 80rpx);text-indent: 2em;text-align: justify;">
				<text>感谢您来盐城市博物馆参观，希望今天的体验能给您带来一段美好的经历。</text>
				<text>占用您几分钟时间，帮助我们完成这份问卷，请将您的真实感受告诉我们，帮助我们不断改进和提升。</text>
			</view>
			<view class="title" style="margin-top: 80rpx;">— 基本信息 —</view>
			<view class="secTitle">1. 您的性別?</view>
			<picker @change="bindPickerChange($event,0)" :value="sexIndex" :range="sexList">
				<input class="square" v-model="sex" placeholder="请选择" placeholder-class="placeholder" />
			</picker>
			<view class="secTitle">2. 您的年龄?</view>
			<picker @change="bindPickerChange($event,1)" :value="ageIndex" :range="ageList">
				<input class="square" v-model="age" placeholder="请选择" placeholder-class="placeholder" />
			</picker>
			<view class="secTitle">3. 您本次参观是否有同行人？</view>
			<picker @change="bindPickerChange($event,2)" :value="aloneIndex" :range="aloneList">
				<input class="square" v-model="alone" placeholder="请选择" placeholder-class="placeholder" />
			</picker>
			<view class="secTitle">4. 您来自哪里？</view>
			<picker @change="bindPickerChange($event,3)" :value="whereIndex" :range="whereList">
				<input class="square" v-model="where" placeholder="请选择" placeholder-class="placeholder" />
			</picker>
			<view class="secTitle">5. 您今年是第几次来盐城市博物馆参观？</view>
			<picker @change="bindPickerChange($event,4)" :value="timesIndex" :range="timesList">
				<input class="square" v-model="times" placeholder="请选择" placeholder-class="placeholder" />
			</picker>
			<button class="apply" @click="submit">提交</button>
		</scroll-view>
		<view class="info" v-if="checkedIndex==1">
			<image class="head" src="../../static/total_img_banner@2x.png" mode="aspectFill"></image>
			<view class="line">
				<image src="../../static/interactive_icon_phone@2x.png"></image>
				<view class="key">预约电话：<text class="value">0515-88550080</text></view>
				<button @click="clip(0)">复制</button>
			</view>
			<view class="line">
				<image src="../../static/interactive_icon_email@2x.png"></image>
				<view class="key">邮箱：<text class="value">ycmuseum@126.com</text></view>
				<button @click="clip(3)">复制</button>
			</view>
			<view class="line">
				<image src="../../static/interactive_icon_address@2x.png"></image>
				<view class="key">地址：<text class="value">盐城市开发大道2号</text></view>
				<button @click="clip(1)">复制</button>
			</view>
			<view class="line">
				<image src="../../static/interactive_icon_bus@2x.png"></image>
				<view class="key">公交线路：<text class="value">B2线、B支3线、B支6线、2路、12路、51路向南100米即可到达</text></view>
				<button @click="clip(2)">复制</button>
			</view>
		</view>
	</view>
</template>

<script>
	import tabbar from '../customer/tabbar.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				checkedIndex: 0,
				dataArray: ["问卷调查", "联系我们"],

				sex: '',
				sexIndex: 0,
				sexList: ['女', '男'],
				age: '',
				ageIndex: 0,
				ageList: ['18岁以下', '19~29岁', '30~49岁', '50~69岁', '70岁以上'],
				where: '',
				whereIndex: 0,
				whereList: ['本市', '周边（江浙沪）', '较远省份', '国外'],
				alone: '',
				aloneIndex: 0,
				aloneList: ['我是一个人来参观的', '我们是家庭出游', '我们是参加团队游', '我和朋友一同出游'],
				times: '',
				timesIndex: 0,
				timesList: ['第一次', '第二次', '第三次', '三次以上'],
			}
		},
		onLoad() {
			this.infomations = this.infomations1
		},
		methods: {
			handleIndexChange(index) {
				this.checkedIndex = index
			},
			bindPickerChange(e, index) {
				if (index == 0) {
					this.sexIndex = e.target.value
					this.sex = this.sexList[this.sexIndex]
				} else if (index == 1) {
					this.ageIndex = e.target.value
					this.age = this.ageList[this.ageIndex]
				} else if (index == 2) {
					this.aloneIndex = e.target.value
					this.alone = this.aloneList[this.aloneIndex]
				} else if (index == 3) {
					this.whereIndex = e.target.value
					this.where = this.whereList[this.whereIndex]
				} else if (index == 4) {
					this.timesIndex = e.target.value
					this.times = this.timesList[this.timesIndex]
				}
			},
			submit(){
				uni.showToast({
					title:'提交成功'
				})
			},
			clip(index){
				let str = '';
				if (index == 0) {
					str = '0515-88550080';
				} else if (index == 1) {
					str = '盐城市开发大道2号';
				} else if (index == 2) {
					str = 'B2线、B支3线、B支6线、2路、12路、51路向南100米即可到达';
				}  else if (index == 3) {
					str = 'ycmuseum@126.com';
				} 
				uni.setClipboardData({
				    data: str,
				    success: function () {
				        uni.showToast({
				        	title:'复制成功'
				        })
				    }
				});
			}
		}
	}
</script>

<style>
	.content {
		position: fixed;
		width: 100%;
		height: calc(100% - 88rpx);
		background: #fff;
	}

	.tabbar {
		background: #fff;
		border-bottom: #ddd solid 2rpx;
	}

	.info {
		width: 100%;
		/* padding: 20rpx; */
		color: #333;
		height: calc(100% - 88rpx);
	}

	.info .head {
		width: 100%;
		height: 400rpx;
	}

	.info .line {
		margin: 0 40rpx;
		width: calc(100% - 80rpx);
		padding: 50rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		border-bottom: 1rpx solid #ededed;
	}

	.info .line image {
		height: 45rpx;
		width: 45rpx;
	}

	.info .line .key {
		line-height: 48rpx;
		width: 460rpx;
		/* margin:0 20rpx; */
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
	}

	.info .line .key .value {
		color: #666 !important;
		font-weight: normal !important;
	}

	.info .line button {
		color: #fff;
		background: #AE6059;
		border-radius: 50rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		margin: 0;
	}

	.title {
		width: 100%;
		font-weight: bold;
		text-align: center;
		font-size: 32rpx;
		color: #333;
		margin: 60rpx 0 50rpx 0;
	}

	.secTitle {
		padding: 0 40rpx;
		font-size: 28rox;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.square {
		margin: 0 40rpx 20rpx 40rpx;
		color: #666;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		border: 2rpx solid #999;
		padding: 20rpx;
		font-size: 28rpx;
		width: calc(100% - 120rpx);
	}

	.apply {
		width: calc(100% - 80rpx);
		margin: 80rpx 40rpx 40rpx 40rpx;
		color: #fff;
		border-radius: 0;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		background: #AE6059;
	}

	.placeholder {
		color: #999;
	}
</style>
